<template>
    <div class="tagsNav">
        <div ref="tagNav" @click.stop="clickTagNav(item)" class="nav-item" :class="{activeTagsNav:currentRoute()}"
             @contextmenu.prevent="rightClick(item,$event)">
            <span>{{item.meta.title}}</span>
            <img @click.stop="closeTagNav(item)" class="nav-item-close" :src="currentRoute() ? iconCloseWhite:iconClose"
                 alt="close" height="16px" width="16px">
        </div>
        <div v-if="showRight" class="right-menu">
            <div @click="closeRight(item,'other')" class="right-menu-item">关闭其他</div>
            <div @click="closeRight(item,'all')" class="right-menu-item">关闭所有</div>
        </div>
    </div>
</template>

<script>
    import iconClose from '@img/icon-close.png';
    import iconCloseWhite from '@img/icon-close-white.png';

    export default {
        name: "tagsNav",
        props: {
            item: {}
        },
        data() {
            return {
                iconClose: iconClose,
                iconCloseWhite: iconCloseWhite,
                active: false,
                showRight: false
            }
        },
        created() {
            document.addEventListener('click', this.clickListener);
        },
        beforeDestroy() {
            document.removeEventListener('click', this.clickListener)
        },
        methods: {
            clickListener(event) {
                if (this.$refs.tagNav && !this.$refs.tagNav.contains(event.target)) {
                    this.showRight = false;
                }
            },
            clickTagNav(item) {
                this.showRight = false;
                if (this.$route.name === item.name) return;
                this.$navTo(item.path);
            },
            closeTagNav(item) {
                if (this.$route.name === 'home') return;

                this.$store.state.tagNavList = this.$util.closeTagNav(item);

                if (this.$store.state.tagNavList.length) {
                    const nextRoute = this.$store.state.tagNavList[0];
                    if (nextRoute.name === this.$route.name) return;
                    this.$navTo(nextRoute.path);
                } else {
                    if (this.$route.name === 'home') return;
                    this.$navTo('/home')
                }
            },
            currentRoute() {
                return this.$route.name === this.item.name;
            },
            rightClick(item, e) {
                this.showRight = true;
            },
            closeRight(item, type) {
                this.showRight = false;
                let list = [];
                if (type === 'all') {
                    list = this.$util.closeAllTagNav();
                }
                if (type === 'other') {
                    list = this.$util.closeOtherTagNav(item);
                }

                this.$store.state.tagNavList = list;
            }
        }
    }
</script>

<style scoped>
    .tagsNav {
        display: flex;
        align-items: center;
        position: relative;
    }

    .nav-item {
        display: flex;
        align-items: center;
        height: 22px;
        margin: 0 5px;
        padding: 0 35px 0 7px;
        border-radius: 4px;
        border: 1px solid #c1c1c1;
        min-width: 57px;
        position: relative;
        white-space: nowrap;
        color: #666;
        background: #f5f5f5;
    }

    .activeTagsNav {
        background: #e6bf7d;
        color: #ffffff;
        border: 1px solid #ffffff;
    }

    .nav-item:hover {
        cursor: pointer;
    }

    .nav-item-close {
        padding-left: 7px;
        position: absolute;
        right: 7px;
    }

    .right-menu {
        width: 90px;
        position: absolute;
        top: 30px;
        left: 7px;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 0 2px 2px #f5f5f5;
        z-index: 788;
    }

    .right-menu-item:hover {
        cursor: pointer;
        background: #e6bf7d;
        border-radius: 4px;
        color: #ffffff;
    }
</style>